<%@page language="abap"%>
<!DOCTYPE HTML>
<html>
<head>
<title>BI Apps - Component Editor</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="Stylesheet" type="text/css" href="../theme/css/style_reset.css" />
<link rel="Stylesheet" type="text/css" href="../theme/css/style_admin_tabs.css" />
<link rel="Stylesheet" type="text/css" href="../theme/css/button_content.css" />
<link rel="Stylesheet" type="text/css" href="../theme/css/form_content.css" />
<script type='text/javascript' src='../../zbw_reporting/scripts/framework_include.js'></script>
<script type="text/javascript" src="../api/js/jquery-1.8.3.js"></script>
<script type="text/javascript">

// otaism2a: 28,1,2014 to reduce multiple BOI.js while loading
var BOI = parent.BOI;

var comp = { APP_ID: parent.app_id ,COMP_ID: "", TITLE: "", URL: "",GROUP_NAME: "" };
var method_name = "CREATE";

$(function () {
    $('#submit').live('click', function () {
        var valid = true;
        $('#bi_comp_properties tr').not(':first').not(':last').each(function () {
            if ($(this).find('[fieldname="PROP"]').val().trim().length == 0)
                valid = false;
        });
        if (valid)
            request();
        else
        //alert("ERROR: Please make sure all properties have a valid name.");
            BOI.BOILib.Util.log('ERROR: Please make sure all properties have a valid name.', true);
        return false;
    });

    //bind input change events for comp info
    $(document).on('change', 'form li input[name], form li select[name]', function () {
        comp[$(this).attr('name')] = $(this).val();
    });

    //PROPERTIES
    //bind add event
    $(document).on('click', 'img[action="add"]', function () {
        $(this).attr("action", "delete");
        $(this).attr("src", "../img/delete.PNG");

        var template = $('#bi_row_template tbody').html();
        template = template.replace(/="delete/g, '="add');
        template = template.replace("delete.", "add.");
        $(this).parents('table tbody').append(template);
    });

    $(document).on('click', 'img[action="delete"]', function () {
        $(this).parents('tr').remove();
    });

    //added by on 2/12/2014
    BOI.BOIData.lookup.getCompTypes(function (data) {
        $(data).find('COMP_TYPE').each(function () {
            $('#GROUP_NAME').append('<option value="' + $(this).children()[0].textContent + '">' + $(this).children()[1].textContent + '</option>');
        });
    });

    BOI.BOIData.list.getUserApps(function (data) {
        $(data).find('APP').each(function () {
            $('#APP_ID').append('<option value="' + $(this).text() + '">' + $(this).text() + '</option>');
        });

        if (parent.current_comp) {
            comp.COMP_ID = parent.current_comp.COMP_ID;
            comp.APP_ID = parent.current_comp.APP_ID;
            if(comp.COMP_ID){
                $('#APP_ID').attr("disabled",true);
            }
        }

        if (comp.COMP_ID && comp.COMP_ID != "") //TODO: app_id usage must be fixed with ALL and specific app_id support
        {
            BOI.BOIData.read.getComponent(comp.APP_ID, comp.COMP_ID, function (data) {
                method_name = "UPDATE";
                $(data).find('COMPONENT').children().each(function () {
                    var tag = this.tagName;
                    comp[tag] = $(this).text();
                    $('#' + tag).val(comp[tag]);
                });
                $('#COMP_ID').attr('readonly', 'readonly');
            });
            BOI.BOIData.list.getProperties(comp.APP_ID, comp.COMP_ID, function (data) {
                $(data).find('COMP_PROP').each(function () {

                    var row = $('#bi_row_template tbody').html();
                    row = $(row);

                    $(this).children().each(function () {
                        var tag = this.tagName;
                        var val = $(this).text();
                        row.find('[fieldname="' + tag + '"]').val(val);


                    });
                    $('#bi_comp_properties').append(row);
                });
                var template = $('#bi_row_template tbody').html();
                template = template.replace(/="delete/g, '="add');
                template = template.replace('delete.', 'add.');
                $('#bi_comp_properties tbody').append(template);
            });
        }
        else {
            method_name = "CREATE";
            var template = $('#bi_row_template tbody').html();
            template = template.replace(/="delete/g, '="add');
            template = template.replace("delete.", "add.");
            $('#bi_comp_properties tbody').append(template);

        }
    });
});

function request() {
    var record, class_name, req, param, done = 0;
    record = new BOI.BOIData.Record();
    class_name = "ZCL_MYBW_COMPONENT";

    for (var i in comp) {
        if (i) {
            param = new BOI.BOIData.Parameter();
            param.name = i;
            param.values = comp[i] == null ? [""] : [comp[i]];
            record.parameters.push(param);
        }
    }
    req = BOI.BOIData.request.prepare(class_name, method_name, [record]);
    BOI.BOIData.request.perform(req, 'text', 'POST', function (data) {
        deleteProperties(); //delete then create properties
    });
}

function deleteProperties() {
    var records, record, param, req, class_name, method_name;
    records = [];
    class_name = "ZCL_MYBW_COMP_PROP";
    method_name = "DELETE";

    record = new BOI.BOIData.Record();

    param = new BOI.BOIData.Parameter();
    param.name = 'APP_ID';
    param.values = [comp.APP_ID];

    param = new BOI.BOIData.Parameter();
    param.name = 'COMP_ID';
    param.values = [comp.COMP_ID];
    record.parameters.push(param);

    records.push(record);

    req = BOI.BOIData.request.prepare(class_name, method_name, records);
    BOI.BOIData.request.perform(req, 'text', 'POST', function (data) {
        //alert($(data).find('MESSAGE').text());
        saveProperties();
    });
}

function saveProperties() {
    var records = [], record, class_name, req, param;
    class_name = "ZCL_MYBW_COMP_PROP";

    $('#bi_comp_properties tbody').find('tr').not(':last').each(function () {
        record = new BOI.BOIData.Record();
        var fields = $(this).find('*[fieldname]');
        var prop = {
            COMP_ID: comp.COMP_ID,
            PROP: $(this).find('*[fieldname="PROP"]').val(),
            DESCRIPTION: $(this).find('*[fieldname="DESCRIPTION"]').val(),
            TYPE: $(this).find('*[fieldname="TYPE"]').val(),

            DISP_TYPE: $(this).find('*[fieldname="DISP_TYPE"]').val(),
            VALUE: $(this).find('*[fieldname="VALUE"]').val(),
            POS_VALUES: $(this).find('*[fieldname="POS_VALUES"]').val(),
            APP_ID:comp.APP_ID
        };

        for (var i in prop) {
            param = new BOI.BOIData.Parameter();
            param.name = i;
            param.values = prop[i] == null ? [""] : [prop[i]];
            record.parameters.push(param);
        }
        records.push(record);
    });

    if(records.length === 0){
        //alert(" Add Properties To The Component");
        BOI.BOILib.Util.log('Add Properties To The Component', true);
        return;
    }

    req = BOI.BOIData.request.prepare(class_name, "CREATE", records);
    BOI.BOIData.request.perform(req, 'text', 'POST', function (data) {
        BOI.BOILib.Util.log($(data).find('MESSAGE').text(), true);
        parent.current_comp =  comp;
        parent.refreshComponents();
    });
}
</script>
</head>
<body>
<div class="tab-frame bi_admin_app_edit">
    <form>
        <h2>BI Apps - Component Editor</h2>
        <ul>
            <li>
                <label for="APP_ID">APP ID:</label>
                <select id="APP_ID" name="APP_ID"></select>
            </li>
            <li>
            <li>
                <label for="COMP_ID">Component ID:</label><input id="COMP_ID" name="COMP_ID" type="text" /></li>
            <li>
                <label for="TITLE">Name:</label><input id="TITLE" name="TITLE" type="text" /></li>
            <li>
                <label for="DESCRIPTION">Description:</label><input id="DESCRIPTION" name="DESCRIPTION" type="text" /></li>
            <li>
                <label for="URL">URL:</label><input id="URL" name="URL" type="text" /></li>

            <li>
                <label for="GROUP_NAME">Group Name:</label>
                <select id="GROUP_NAME" name="GROUP_NAME"></select>
            </li>
                <h3>Component Properties</h3>

                <table id="bi_comp_properties">
                    <thead>
                    <tr>
                        <th>Property Name</th>
                        <th>Description</th>
                        <th>Selection Type</th>
                        <th>Display Type</th>
                        <th>Default Value</th>
                        <th>Possible Values</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </li>
            <li>

                <a id="submit" class="button-content-YW" href="#"><span>Save</span></a>
            </li>
        </ul>
    </form>
    <table id="bi_row_template" style="display: none;">
        <tbody>
        <tr>
            <td>
                <input style="width: 80%" type="text" fieldname="PROP" /></td>
            <td>
                <input style="width: 80%" type="text" fieldname="DESCRIPTION" /></td>
            <td>
                <select style="width: 100%" fieldname="TYPE">
                    <option value="S">Single</option>
                    <option value="M">Multiple</option>
                </select>
            </td>
            <td>
                <select style="width: 100%"  fieldname="DISP_TYPE">
                    <option>TEXTBOX</option>
                    <option>CHECKBOX</option>
                    <option>DROPDOWN</option>
                    <option>LIST</option>
                </select>
            </td>
            <td>
                <input style="width: 80%"  type="text" fieldname="VALUE" /></td>
            <td>
                <input style="width: 80%" type="text" fieldname="POS_VALUES" /></td>
            <td>
                <img action="delete" alt="delete" src="../img/delete.png" /></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>